<template>
  <div class="vi-table-content-1">
    <!-- <div class="thead">
      <div class="list" v-for="item in head">{{ item }}</div>
    </div>
    <div class="tbody">
      <div class="td" v-for="(el,i) in todayList" :key="i">
        <div class="list">{{ i+1 }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
        <div class="list">{{ el.accountTime }}</div>
      </div>
    </div> -->
    <el-table :data="todayList"  height="100%" style="width: 100%">
      <el-table-column type="index" label="序号" align="center"> </el-table-column>
      <el-table-column prop="accountTime" label="时间" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="deptName" label="项目部" :show-overflow-tooltip="true">
        <template #default="scope">
          <span class="bold">{{scope.row.deptName}}</span>
        </template>
         </el-table-column>
      <el-table-column prop="accountType" label="收/支" :show-overflow-tooltip="true" width="60">
        <template #default="scope">
          <span class="blue" v-if="scope.row.accountType === 1">收入</span>
          <span class="red" v-else>支出</span>
        </template></el-table-column
      >
      <el-table-column prop="accountAmount" label="金额(元)" :show-overflow-tooltip="true" 
      width="140"
      align="right">
        <template #default="scope">
          <span class="blue" v-if="scope.row.accountType === 1">+{{ formatNumber(scope.row.accountAmount) }}</span>
          <span class="red" v-else>{{ filterUnit(formatNumber(scope.row.accountAmount)) }}</span>
          
        </template></el-table-column
      >
      </el-table-column>
      <el-table-column prop="accountFundTypeName" label="资金类型" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="fundAccountName" label="资金账户" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="currentAccountName" label="对方单位" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "vi-table",
  props: {
    todayList: {
      default: () => [],
    },
  },
  data() {
    return {
      head: [
        "序号",
        "时间",
        "项目部",
        "收/支",
        "金额(万元)",
        "资金类型",
        "资金账户",
        "对方单位",
        "备注",
      ],
    };
  },
  filters: {
    filterNum(val) {
      if (val) {
        return (Number(val) / 10000).toFixed(3) || 0;
      } else {
        return 0;
      }
    },
  },
  methods: {
    filterUnit(num) {
      if (num < 0) {
        return `${num}`;
      } else {
        return `-${num}`;
      }
    },
    formatNumber(num) {
      if (!num) {
        return "0.00";
      }
      let str = String(num).split(".");
      let num1 = str[0];
      let num2 = `${str[1]}`;
      if (str[1]) {
        let data = `${str[1]}`;
        if (data.length > 2) {
          data = data.slice(0, 2);
        }
        if (data.length === 1) {
          data = `${data}0`;
        }
        num2 = `.${data}`;
      } else {
        num2 = ".00";
      }
      let reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (num1 + "").replace(reg, "$&,") + `${num2}`;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.vi-table-content-1 {
  width: 100%;
  height: vh(500);

  * {
    scrollbar-width: none; /* Firefox */
  }
  //滚动条设置
  ::-webkit-scrollbar {
    width: 13px;
    height: 13px;
    color: var(--color);
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.05);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }

  ::v-deep {
    .el-table {
      background: #002463;

      &::before {
        display: none;
      }
      .el-table__header {
        tr {
          background: #002463;

          th {
            background: #002463;
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: #8fc7ff;
            opacity: 0.65;
            border: 0;
          }
        }
      }

      tbody {
        .el-table__row {
          &:nth-child(2n-1) {
            td {
              border: 0;
              background: #0f3371;
            }
          }

          &:nth-child(2n) {
            td {
              border: 0;
              background: #002463;
            }
          }

          td {
            border: 0;
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: bold;
            color: #8fc7ff;
          }
        }
      }
    }
  }
}
</style>
